<template>
	<div ref="scrollable" class="content-list-alarm-bar">
		<vue-scroll>
			<transition-group :name="transitionName" tab="ul">
				<li :key="item.id" v-for="item in alarmList" class="the-alarm-bars" :loading="loading">
					<div class="alarm-list-item" @click="openAlarmModal(item)">
						<div class="list-avatar">
							<img
								:src="item.imageUrl"
								:alt="defaultImage"
								:onerror="
									(e: Event) => {
										(e.target as HTMLImageElement).src = defaultImage;
										(e.target as HTMLImageElement).onerror = null;
									}
								"
							/>
						</div>
						<div class="alarm-list-item-right">
							<div class="top-title">
								<div class="risk-level" :style="c_Fengxian(item).style">
									{{ c_Fengxian(item).text }}
								</div>
								<div v-tooltip="item.content" :title="item.content" class="item-meta-title">
									{{ item.content }}
								</div>
							</div>
							<div v-tooltip="item.positionName" class="description item-senceName">
								{{ item.positionName ? item.positionName : '默认区域' }}
							</div>

							<div v-tooltip="item.deviceName" class="description item-deviceName">
								{{ item.deviceName }}
							</div>
							<global-picture-set :list="item.personInfoList"></global-picture-set>

							<div v-tooltip="item.createTime.substring(5, 19).replace('T', ' ')" class="description item-eventTime">
								{{ item.createTime.substring(5, 19).replace('T', ' ') }}
							</div>
						</div>
					</div>
				</li>
			</transition-group>

			<infinite-loading :firstload="false" @infinite="load">
				<template #spinner>
					<div class="loading-style">加载中...</div>
				</template>
				<template #complete>
					<div class="alarm-list-loader" @click="loadMore">查看更多</div>
				</template>
			</infinite-loading>
		</vue-scroll>

		<alarm-person-modal ref="alarmModalRef"></alarm-person-modal>
	</div>
</template>

<script setup lang="ts" name="AlarmRecord">
import InfiniteLoading from 'v3-infinite-loading';
import AlarmPersonModal from './AlarmPersonModal.vue';
import 'v3-infinite-loading/lib/style.css';
import { realVideoApi } from '../../api';
import defaultImage from '@/global-assets/imgs/img-none.png';
import { appStore } from '@/global-store/index';
import { historyCallInterval } from '../../utils';

const props = withDefaults(defineProps<{ deviceIds: null | string }>(), {
	deviceIds: null
});

const emits = defineEmits<{
	(e: 'loadMore'): void;
}>();

const { LayoutStore } = appStore;

const alarmList = ref<any[]>([]);

const loadMore = (): void => {
	emits('loadMore');
};
const transitionName = ref('');

const scrollable = ref<HTMLElement>();
const scrollNum = ref(2);

const alarmModalRef = ref();
const loading = ref(false);

const c_Fengxian = computed(() => {
	return (item: any) => {
		if (item.securityLevel === 0) {
			return {
				style: { border: '1px solid  #3D7FE9', background: 'rgba(61, 127, 233, 0.10)', color: '#3D7FE9' },
				text: '低风险'
			};
		}
		if (item.securityLevel === 1) {
			return {
				style: { border: '1px solid  #F59700', background: 'rgba(245, 151, 0, 0.10)', color: '#F59700' },
				text: '中风险'
			};
		}
		return {
			style: { border: '1px solid  #BA3B29', background: 'rgba(186, 59, 41, 0.10)', color: '#BA3B29' },
			text: '高风险'
		};
	};
});

const openAlarmModal = (item: any): void => {
	if (!LayoutStore.triggerScreen) {
		let data = {
			id: item.id,
			tag: item.content,
			time: item.createTime,
			image: item.imageUrl,
			title: item.positionName + '-' + item.deviceName,
			securityLevel: item.securityLevel
		};
		alarmModalRef.value.openModal([data]);
	}
};

// 获取报警记录列表
const getAlarmList = async (current: number = 1, isReset: boolean = true, deviceIds: string | null = null): Promise<void> => {
	try {
		loading.value = true;

		let res = await realVideoApi.getAlarmList({
			current,
			areDeviceIdList: deviceIds,
			pageSize: 10,
			auditType: 1
		});
		if (res.data) {
			if (isReset) {
				alarmList.value = res.data;
			} else {
				scrollNum.value++;
				alarmList.value = alarmList.value?.concat(res.data);
			}
		}
	} catch (error) {
		console.log('error', error);
	} finally {
		loading.value = false;
	}
};

const load = async ($state: { complete: () => void }): Promise<void> => {
	const scrollDiv = scrollable.value as HTMLElement;
	// 滚动条已经到达底部
	if (!(scrollDiv.scrollTop + scrollDiv.clientHeight >= scrollDiv.scrollHeight - 1)) {
		return;
	}

	if (loading.value) {
		return;
	}
	if (scrollNum.value > 5) {
		$state.complete();
		return;
	}

	await getAlarmList(scrollNum.value, false, props.deviceIds);
};

const getInterval = historyCallInterval();

const timer = ref();
// 推送消息
const getData = (data: any): void => {
	transitionName.value = getInterval() > 600 ? 'event-list' : '';
	timer.value && clearTimeout(timer.value);
	setTimeout(() => {
		alarmList.value.unshift(data);
		clearTimeout(timer.value);
	}, 1000);

	// 新增数据大于10个才删除
	if (!alarmList.value?.length) {
		return;
	}
	if (alarmList.value?.length > 10) {
		alarmList.value?.pop();
	}
};

defineExpose({
	getData,
	getAlarmList
});
</script>

<style lang="less" scoped>
.risk-level {
	display: flex;
	height: 20px;
	border-radius: 4px;
	padding: 4px 6px;
	align-items: center;
}

:deep(.person-img-box) {
	justify-content: flex-start !important;
}

::-webkit-scrollbar-thumb {
	background-color: #c1c1c1; /* 设置滚动条thumb（滑块）的颜色 */
}

.event-list-move,
.event-list-enter-active,
.event-list-leave-active {
	transition: all 0.5s ease;
}

.event-list-enter-from {
	opacity: 0;
	transform: translateY(-30px);
}

.event-list-leave-to {
	opacity: 0;
	transform: translateY(30px);
}

.content-list-alarm-bar {
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
	min-width: 328px;
	height: calc(100% - 70px);
	padding: 0 8px;
	background: transparent;

	.loading-style {
		text-align: center;
		color: @white;
	}

	.alarm-list-loader {
		width: 300px;
		height: 32px;
		padding-left: 8px;
		font-size: 14px;
		line-height: 32px;
		text-align: center;
		color: @text03;
		cursor: pointer;
	}

	.the-alarm-bars {
		box-sizing: border-box;
		width: 312px;
		height: 130px;
		margin-bottom: 8px;
		border: 1px solid #2b3a50;
		border-bottom: 1px solid #2b3a50;
		border-radius: 6px;
		background: rgba(12, 22, 41, 1);
		box-shadow: 0 9px 8px 0 rgba(4, 10, 20, 0.45);
		background-blend-mode: color;

		.alarm-list-item {
			position: relative;
			top: -14px;
			display: flex;
			overflow: hidden;
			height: 100%;
			border-radius: 6px;
			padding: 5px 3px;
			justify-content: left;

			&:hover {
				background: linear-gradient(278deg, #173057 0.86%, #0c1629 49.44%) !important;
				box-shadow: 0 9px 8px 0 rgba(4, 10, 20, 0.45) !important;
				cursor: pointer;
			}

			.list-avatar {
				overflow: hidden;
				width: 168px;
				height: 99%;
				margin-right: 8px;
				padding-left: 2px;
				flex-shrink: 0;

				img {
					width: 168px;
					height: 100%;
					border-radius: 6px 0 0 6px;
					transform: translateY(-2px);
					object-fit: fill;
				}

				&:hover {
					cursor: pointer;
				}
			}

			.alarm-list-item-right {
				.description {
					width: 120px;
				}

				.top-title {
					display: flex;
					align-items: center;

					.item-meta-title {
						width: 98px;
						margin-left: 4px;
						font-size: 14px;
						font-weight: 700;
						color: @text01;
						flex: 1;
					}
				}

				.item-senceName {
					margin-top: 4px;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					color: @text02;
				}

				.item-deviceName {
					width: 82px;
					margin-bottom: 4px;
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
					color: @text03;
				}

				.item-eventTime {
					margin-top: 4px;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					color: @text01;
				}
			}
		}
	}
}
</style>
